<template>
	<view class="care-record-page">
		<view class="my-navigation">
			<custom-navbar title="记录详情" :isReturnVisible="true" isAddVisible="false" />
		</view>

		<view class="content-container" v-if="recordDetail">
			<!-- 项目头部信息 -->
			<view class="project-header">
				<view class="project-info">
					<!-- <view class="project-icon"> -->
					<!-- <uni-icons type="lungs" size="30" color="#F6A031"></uni-icons> -->

					<!-- </view> -->
					<image src="/static/icons/project.png" class="project-icon"></image>
					<view class="project-text">
						<text class="project-name">{{ recordDetail.projectName }}</text>
						<text class="project-code">护理项目编号：{{ recordDetail.code }}</text>
					</view>
				</view>
			</view>

			<!-- 护理时长卡片 -->
			<view class="duration-card">
				<view class="duration-info">
					<text class="duration-title">
						<image style="width: 20px; height: 20px; margin-bottom: 4px;"
							src="/static/icons/clock_circle_white.png"></image>
						<text> 护理总时长</text>
					</text>
					<view>
						<text class="duration-value">{{ recordDetail.careDuration }}</text>
						<text class="duration-unit">分钟</text>
					</view>
				</view>
				<!-- <view class="duration-icon">
					<uni-icons type="stopwatch" size="40" color="white"></uni-icons>
				</view> -->
				<image class="duration-icon" src="/static/icons/clock_white.png"></image>
			</view>

			<!-- 详细信息网格 -->
			<view class="details-grid">
				<!-- 服务信息卡片 -->
				<view class="detail-card">
					<view class="card-header">
						<uni-icons type="calendar-check" size="20" color="#F6A031"></uni-icons>
						<text class="card-title">服务信息</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">护理项目</text>
						<text class="detail-value">{{ recordDetail.projectName }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">护理数量</text>
						<text class="detail-value">{{ recordDetail.careCount }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">护理内容</text>
						<text class="detail-value">{{ recordDetail.careDetails }}</text>
					</view>
				</view>

				<!-- 时间信息卡片 -->
				<view class="detail-card">
					<view class="card-header">
						<uni-icons type="history" size="20" color="#F6A031"></uni-icons>
						<text class="card-title">时间信息</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">开始时间</text>
						<text class="detail-value">{{ recordDetail.careStartTime }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">结束时间</text>
						<text class="detail-value">{{ recordDetail.careEndTime }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">持续时间</text>
						<text class="detail-value">{{ recordDetail.careDuration }} 分钟</text>
					</view>
				</view>

				<!-- 护工信息卡片 -->
				<view class="detail-card">
					<view class="card-header">
						<uni-icons type="user-nurse" size="20" color="#F6A031"></uni-icons>
						<text class="card-title">护工信息</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">姓名</text>
						<text class="detail-value">{{ recordDetail.caregiverName }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">联系电话</text>
						<text class="detail-value">{{ recordDetail.caregiverPhone }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view class="empty-container" v-else>
			<image class="empty-image" src="/static/icons/empty.png"></image>
			<view class="empty-text">空空如也 · 护理记录找不到了</view>
			<view class="empty-subtext">出错啦！<br>请联系工作人员</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'; // 从 vue 导入 ref
	import {
		onLoad
	} from '@dcloudio/uni-app'; // 从 uni-app 导入生命周期钩子
	import customNavbar from '@/components/custom-navbar.vue';
	import {
		getCareRecordDetail
	} from '../../api/record';

	// 创建响应式变量存储参数
	const serviceRecordId = ref(null);
	const recordDetail = ref();
	// const recordDetail = {
	// 	serviceRecordId: 22,
	// 	careServiceId: 1,
	// 	customerId: 1,
	// 	customerName: "张三",
	// 	age: 55,
	// 	gender: "男",
	// 	bedNumber: "111-1",
	// 	careLevel: "1",
	// 	code: "xiyang",
	// 	projectName: "吸氧",
	// 	careCount: 1,
	// 	careDetails: "紧急吸氧",
	// 	caregiverName: "健一",
	// 	housekeeperId: 2,
	// 	caregiverPhone: "12345678908",
	// 	careStartTime: "2025-06-23 00:00:00",
	// 	careEndTime: "2025-06-23 01:00:00",
	// 	careDuration: 60
	// }

	// 使用 onLoad 生命周期钩子接收参数
	onLoad(async (options) => { // 1. 添加 async 关键字
		// 从路由选项获取传递的参数
		serviceRecordId.value = options.serviceRecordId;
		console.log('接收到的服务记录ID:', serviceRecordId.value);

		try {
			// 2. 使用 await 等待异步操作完成
			const res = await getCareRecordDetail(serviceRecordId.value);
			console.log('API返回的完整响应:', res);

			// 3. 根据实际响应结构获取数据
			// 您的响应结构是 {code: 1000, data: {...}, message: "成功", total: 0}
			if (res && res.data) {
				console.log('实际数据:', res.data);
				recordDetail.value = res.data;
			} else {
				console.warn('API响应中没有data字段:', res);
			}
		} catch (error) {
			console.error('获取护理记录详情失败:', error);
			uni.showToast({
				title: '获取详情失败',
				icon: 'none'
			});
		}
	})
</script>

<style scoped>
	/* .care-record-page {
		min-height: 100vh;
		background: url('@/static/background.png') no-repeat;
		background-size: cover;
		padding-top: 30px;
	} */
	.my-navigation {
		margin-bottom: 60px;
		border: 1px solid #fff;
	}

	/* .content-container {
		margin-top: 80px;
	} */

	.care-record-page {
		padding-bottom: 20px;
		background: url('@/static/background.png') no-repeat;
		min-height: 100vh;
		padding: 0;
	}

	.content-container {
		padding: 20px;
	}

	.project-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25px;
		padding-bottom: 20px;
		border-bottom: 1px solid #eee;
	}

	.project-info {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.project-icon {
		width: 70px;
		height: 70px;
		/* background: #fff4e6; */
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #F6A031;
		box-shadow: 0 4px 10px rgba(246, 160, 49, 0.1);
	}

	.project-text {
		display: flex;
		flex-direction: column;
	}

	.project-name {
		font-size: 24px;
		font-weight: 600;
		color: #5a3e1f;
		margin-bottom: 5px;
		margin-left: 10px;
	}

	.project-code {
		font-size: 14px;
		color: #666;
		background: #f9f9f9;
		padding: 4px 10px;
		border-radius: 20px;
		align-self: flex-start;
	}

	.status-badge {
		background: #F6A031;
		color: white;
		padding: 8px 15px;
		border-radius: 20px;
		font-weight: 500;
		font-size: 14px;
	}

	.duration-card {
		background: linear-gradient(to right, #F6A031, #FFB74D);
		border-radius: 16px;
		padding: 20px;
		color: white;
		margin-bottom: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 6px 15px rgba(246, 160, 49, 0.4);
	}

	.duration-info {
		flex: 1;
	}

	.duration-title {
		font-size: 18px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		gap: 10px;
		text-align: center;
		vertical-align: middle;
	}

	.duration-value {
		font-size: 36px;
		font-weight: 700;
	}

	.duration-title image {
		vertical-align: middle;
		/* 关键修复 */
	}

	.duration-unit {
		font-size: 18px;
		font-weight: 500;
		margin-left: 5px;
	}

	.duration-icon {
		font-size: 50px;
		opacity: 0.9;
		width: 40px;
		height: 40px;
	}

	.details-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.detail-card {
		background: #fffaf3;
		border-radius: 16px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
		border: 1px solid #f9e9d6;
	}

	.card-header {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f5e5d0;
	}

	.card-title {
		font-size: 18px;
		font-weight: 600;
		color: #F6A031;
	}

	.detail-item {
		display: flex;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px dashed #f0e6d7;
	}

	.detail-item:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.detail-label {
		width: 100px;
		color: #8c6d4a;
		font-size: 14px;
		font-weight: 500;
	}

	.detail-value {
		flex: 1;
		font-size: 15px;
		font-weight: 500;
		color: #5a3e1f;
	}

	.action-buttons {
		display: flex;
		gap: 15px;
		justify-content: center;
		padding: 20px 0;
	}

	.action-btn {
		flex: 1;
		max-width: 280px;
		padding: 12px;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		transition: all 0.3s ease;
	}

	.btn-print {
		background: #f9f9f9;
		color: #F6A031;
		border: 1px solid #f6d8b1;
	}

	.btn-share {
		background: linear-gradient(to right, #F6A031, #FFB74D);
		color: white;
	}

	.footer-decoration {
		height: 10px;
		background: linear-gradient(to right, #F6A031, #FFB74D);
		margin-top: 20px;
		border-radius: 0 0 20px 20px;
	}

	/* 空状态样式 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50px 20px;
		text-align: center;
		background: white;
		/* margin: 20px; */
		margin: 80px 20px;
		border-radius: 16px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
		animation: fadeIn 0.6s ease;
	}

	.empty-image {
		width: 180px;
		height: 180px;
		margin-bottom: 20px;
		opacity: 0.9;
	}

	.empty-text {
		font-size: 18px;
		font-weight: 500;
		color: #5a5a5a;
		margin-bottom: 15px;
		letter-spacing: 1px;
	}

	.empty-subtext {
		font-size: 14px;
		color: #999;
		line-height: 1.6;
		max-width: 300px;
		margin-bottom: 25px;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.content-container {
			padding: 15px;
		}

		.project-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
		}

		.details-grid {
			grid-template-columns: 1fr;
		}

		.action-buttons {
			flex-direction: column;
			gap: 12px;
		}

		.action-btn {
			max-width: 100%;
		}

		.duration-card {
			flex-direction: column;
			text-align: center;
			gap: 20px;
		}
	}
</style>